import React, { Component } from 'react';
import { Input, Col, Select, Button, Tooltip, Tag, Pagination, Checkbox, Radio, Icon } from 'antd';

import Link from 'umi/link';
import axios from 'axios';
import Api from '../../services/apis';
import IframeComm from "../../components/IframeComm";
import QueueAnim from 'rc-queue-anim';

import styles from "./style.less";

const InputGroup = Input.Group;
const Option = Select.Option;
const CheckboxGroup = Checkbox.Group;
const RadioGroup = Radio.Group;

const noPic = '';


class MountMap extends Component {
  constructor(props) {
    super(props);
    this.state = {
      showList: false,
      resultDatas: [],
      resultDatasCount: 0,
      showFilter: false,
      res: [],
      sendMapData: {
        type: "",
        data: {}
      },
      timer: '',
      showLoading: true,
      searchVal: ''
    };
  }
  searchVal(searchVal) {
    let address = this.state.searchVal;
    if (searchVal) {
      address = searchVal
    };
    axios.get(Api.searchCommunityName, {
      params: {
        address
      }
    }).then((res) => {
      this.setState({
        sendMapData: {
          type: "search",
          data: res
        }
      });
    });
  }

  filter() {
    this.setState({
      showList: false,
      showFilter: !this.state.showFilter
    });
  }
  changeFilter(type, checkedValues) {
    let res = {
      type
    };

    switch (type) {
      case 'qszt':
        this.setState({
          radioValue: checkedValues.target.value
        });
        res.checkedValues = checkedValues.target.value;
        break;
      case 'qsxz':
        this.setState({
          qsValue: checkedValues
        });
        res.checkedValues = checkedValues;
        break;
      case 'zczt':
        this.setState({
          zcValue: checkedValues
        });
        res.checkedValues = checkedValues;
        break;
    };

    this.setState({
      sendMapData: res
    });

  }

  closeInfo() {
    this.setState({
      right: -290
    });
  }
  changeTools(nowType) {
    this.setState({
      nowType
    });
  }
  onReceiveMessage(data) {
    let sendData = {
      projectCode: this.props.location.state.data.projectCode,
      ...data.data
    };
    axios.get(Api.mountCommunity, {
      params: {
        ...sendData
      }
    }).then((res) => {

    });

  }
  clickList() {
    let sendMapData = {};
    sendMapData.type = 'search';
    sendMapData.data = {};
    this.setState({
      sendMapData
    });
  }
  componentWillMount() {
    let sendMapData = {};
    sendMapData.type = 'jump';
    console.log(this.props);

    sendMapData.data = JSON.parse(this.props.location.query.data);
    this.setState({
      sendMapData
    });
  }
  handleSearch(searchContent) {
    if (this.state.timer !== '') {
      clearTimeout(this.state.timer);
    };
    let timer = setTimeout(() => {
      const that = this;
      axios.get(Api.queryAsset, {
        params: {
          searchType: 3,
          searchContent
        }
      }).then((res) => {
        this.setState({
          res: res.data
        });
        if (res.data.length === 0) {
          this.setState({
            showLoading: false
          });
        };
      });
    }, 600);
    this.setState({
      timer
    });
  }
  handleChange(searchVal) {
    this.setState({ searchVal });
    this.searchVal(searchVal);
  }
  clickDraw(type) {
    this.setState({
      sendMapData: {
        type: 'draw',
        event: type
      }
    });
  }
  render() {
    return (
      <div className={styles.mapBox}>
        <div className={styles.searchBox} style={{
          width: 610
        }}>
          <InputGroup compact>
            <Select
              showSearch
              placeholder='请输入内容'
              className={styles.search}
              defaultActiveFirstOption={false}
              showArrow={false}
              filterOption={false}
              onSearch={this.handleSearch.bind(this)}
              onChange={this.handleChange.bind(this)}
              notFoundContent={null}
            >

              {this.state.res.map((item, index) => (
                <Option value={item} key={index}>{item}</Option>
              ))}
            </Select>
            <Tooltip placement="bottom" title='搜索'>
              <Button type="primary" icon="search" onClick={this.searchVal.bind(this)} />
            </Tooltip>
            &nbsp;
            <Tooltip placement="bottom" title='点击选择新的小区地址'>
              <Button type="primary" onClick={this.clickDraw.bind(this, 'draw')}>绘制</Button>
            </Tooltip>
            &nbsp;
            <Tooltip placement="bottom" title='保存选择的小区地址'>
              <Button type="primary" onClick={this.clickDraw.bind(this, 'save')}>保存绘制</Button>
            </Tooltip>
            &nbsp;
            <Tooltip placement="bottom" title='清除选择的小区地址'>
              <Button type="primary" onClick={this.clickDraw.bind(this, 'clear')}>清除绘制</Button>
            </Tooltip>

          </InputGroup>
        </div>
        {Number(sessionStorage.getItem('isMap')) === 1 ?
          <div>
            <IframeComm
              attributes={{
                src: "/gis/mapzcgj.html",
                style: {
                  width: '100%',
                  height: '100%',
                  top: '0px',
                  left: '0px',
                  position: "absolute"
                }
              }}
              postMessageData={this.state.sendMapData}
              handleReceiveMessage={this.onReceiveMessage.bind(this)}
            />
          </div>
          :
          null
        }
      </div>
    );
  }
}

export default MountMap;
